<?php
/**
 * 3-4岁专区内容
 */

if (!defined('ROOT_PATH')) {
    die('直接访问被禁止');
}

// 设置页面标题
set_page_title('3-4岁专区');

// 页面特定样式
$page_styles = <<<HTML
<style>
    /* 3-4岁专区特定样式 */
    body {
        background-color: #fff5f2;
        font-family: 'Comic Sans MS', 'Marker Felt', 'Arial Rounded MT Bold', sans-serif;
    }
    
    .navbar {
        background: linear-gradient(to right, #ff9e80, #ffcc80);
        border-radius: 0 0 20px 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .navbar-brand {
        font-size: 1.8rem;
        font-weight: bold;
        color: #fff !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }
    
    .nav-link {
        font-size: 1.1rem;
        margin: 0 5px;
        color: rgba(255, 255, 255, 0.9) !important;
        transition: all 0.3s;
        position: relative;
        padding: 8px 15px;
        font-weight: 600;
    }
    
    .nav-link:hover, .nav-link.active {
        color: #fff !important;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
    
    /* 改进导航菜单样式 */
    .navbar-nav .nav-item {
        position: relative;
        margin: 0 5px;
    }
    
    .navbar-nav .nav-item::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background-color: #fff;
        transition: all 0.3s ease;
        transform: translateX(-50%);
    }
    
    .navbar-nav .nav-item:hover::after,
    .navbar-nav .nav-item.active::after {
        width: 80%;
    }
    
    .navbar-light .navbar-nav .nav-item.active .nav-link {
        color: #fff !important;
        font-weight: 700;
    }
    
    .welcome-container {
        background-color: #fff;
        border-radius: 25px;
        padding: 40px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        margin-bottom: 40px;
        border: 8px solid #ffd3b6;
        text-align: center;
        background: linear-gradient(135deg, #FFFFFF 60%, #FFF5F2 100%);
    }
    
    .welcome-title {
        color: #ff7043;
        font-size: 2.8rem;
        font-weight: bold;
        margin-bottom: 20px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    }
    
    .welcome-description {
        color: #666;
        font-size: 1.2rem;
        margin-bottom: 30px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .section-container {
        background-color: #fff;
        border-radius: 20px;
        padding: 30px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        margin-bottom: 30px;
        border: 6px solid;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        overflow: hidden;
        position: relative;
    }
    
    .section-container:hover {
        transform: translateY(-10px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    }
    
    .cognitive-section {
        border-color: #FFB6C1;
        background: linear-gradient(135deg, #FFFFFF 70%, #FFF0F5 100%);
    }
    
    .training-section {
        border-color: #98FB98;
        background: linear-gradient(135deg, #FFFFFF 70%, #F0FFF0 100%);
    }
    
    .section-title {
        color: #444;
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 3px dashed rgba(0,0,0,0.1);
        text-align: center;
    }
    
    .cognitive-section .section-title {
        color: #FF6B88;
    }
    
    .training-section .section-title {
        color: #4CAF50;
    }
    
    .section-description {
        color: #666;
        font-size: 1.1rem;
        margin-bottom: 25px;
        text-align: center;
    }
    
    .section-image {
        width: 100%;
        height: 250px;
        object-fit: cover;
        border-radius: 15px;
        margin-bottom: 25px;
        border: 4px solid rgba(255,255,255,0.7);
        box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    }
    
    .features-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-bottom: 30px;
    }
    
    .feature-item {
        background-color: rgba(255,255,255,0.7);
        border-radius: 15px;
        padding: 15px;
        display: flex;
        align-items: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
    }
    
    .feature-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    }
    
    .feature-icon {
        font-size: 2rem;
        margin-right: 15px;
        color: #ff7043;
    }
    
    .cognitive-section .feature-icon {
        color: #FF6B88;
    }
    
    .training-section .feature-icon {
        color: #4CAF50;
    }
    
    .back-to-top {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #ff9e80;
        color: white;
        text-align: center;
        line-height: 50px;
        font-size: 20px;
        cursor: pointer;
        display: none;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        font-weight: bold;
        z-index: 100;
        transition: all 0.3s ease;
    }
    
    .back-to-top:hover {
        background-color: #ff7043;
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }
</style>
HTML;

// 页面特定脚本
$page_scripts = <<<HTML
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化回到顶部按钮
        const backToTopButton = document.getElementById('backToTop');
        
        window.addEventListener('scroll', function() {
            if (window.pageYOffset > 300) {
                backToTopButton.style.display = 'block';
            } else {
                backToTopButton.style.display = 'none';
            }
        });
        
        backToTopButton.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
        
        // 板块容器悬浮动画效果
        const sectionContainers = document.querySelectorAll('.section-container');
        sectionContainers.forEach(container => {
            container.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-10px)';
                this.style.boxShadow = '0 12px 30px rgba(0, 0, 0, 0.15)';
            });
            
            container.addEventListener('mouseleave', function() {
                this.style.transform = '';
                this.style.boxShadow = '';
            });
        });
        
        // 特性项目悬浮动画效果
        const featureItems = document.querySelectorAll('.feature-item');
        featureItems.forEach(item => {
            item.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-5px)';
                this.style.boxShadow = '0 6px 15px rgba(0,0,0,0.1)';
            });
            
            item.addEventListener('mouseleave', function() {
                this.style.transform = '';
                this.style.boxShadow = '';
            });
        });
    });
</script>
HTML;
?>

<!-- 主内容区 -->
<div class="container mt-4">
    <!-- 欢迎区域 -->
    <div class="welcome-container">
        <h1 class="welcome-title">欢迎来到3-4岁专区</h1>
        <p class="welcome-description">这里专为3-4岁的小朋友精心设计，通过认知启蒙和思维训练两大板块，帮助孩子建立基础认知，培养观察力和思维能力，让学习变得有趣又轻松！</p>
        <img src="<?php echo asset_url('images/welcome-3-4.jpg'); ?>" alt="欢迎图片" class="img-fluid rounded" style="max-height: 300px; margin-bottom: 20px;">
    </div>
    
    <!-- 认知板块 -->
    <div class="section-container cognitive-section">
        <h2 class="section-title">认知启蒙</h2>
        <p class="section-description">通过有趣的互动方式，帮助孩子认识世界，建立基础认知能力</p>
        <img src="<?php echo asset_url('images/cognitive-main.jpg'); ?>" alt="认知启蒙" class="section-image">
        
        <div class="features-container">
            <div class="feature-item">
                <div class="feature-icon">🌈</div>
                <div class="feature-text">颜色认知</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">⭐</div>
                <div class="feature-text">形状认知</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">🔢</div>
                <div class="feature-text">数字认知</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">🧸</div>
                <div class="feature-text">物品认知</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">🐶</div>
                <div class="feature-text">动物认知</div>
                </div>
            <div class="feature-item">
                <div class="feature-icon">🌸</div>
                <div class="feature-text">植物认知</div>
            </div>
        </div>
        
        <div class="text-center">
            <a href="<?php echo page_url('age-3-4-cognitive'); ?>" class="section-btn cognitive-btn">进入认知板块</a>
        </div>
    </div>
    
    <!-- 训练板块 -->
    <div class="section-container training-section">
        <h2 class="section-title">思维训练</h2>
        <p class="section-description">通过趣味游戏，锻炼孩子的观察力、记忆力和思维能力</p>
        <img src="<?php echo asset_url('images/training-main.jpg'); ?>" alt="思维训练" class="section-image">
        
        <div class="features-container">
            <div class="feature-item">
                <div class="feature-icon">👁️</div>
                <div class="feature-text">形状颜色辨别</div>
                        </div>
            <div class="feature-item">
                <div class="feature-icon">🧩</div>
                <div class="feature-text">简易拼图游戏</div>
                        </div>
            <div class="feature-item">
                <div class="feature-icon">🔄</div>
                <div class="feature-text">配对连线游戏</div>
                        </div>
            <div class="feature-item">
                <div class="feature-icon">🧠</div>
                <div class="feature-text">记忆力训练</div>
                        </div>
            <div class="feature-item">
                <div class="feature-icon">📊</div>
                <div class="feature-text">分类训练</div>
                    </div>
            <div class="feature-item">
                <div class="feature-icon">🏆</div>
                <div class="feature-text">趣味闯关挑战</div>
            </div>
        </div>
        
        <div class="text-center">
            <a href="<?php echo page_url('age-3-4-training'); ?>" class="section-btn training-btn">进入训练板块</a>
        </div>
    </div>
</div>

<!-- 回到顶部按钮 -->
<div class="back-to-top" id="backToTop">↑</div>